<template>
    <div>
        <div>
            <el-button size="small" icon="el-icon-plus" type="primary" @click="showAddSalary">新增工资账套</el-button>
<!--            <el-button size="small"></el-button>-->
        </div>
        <div style="margin-top: 10px">
            <el-table
                    :data="salarySobs"
                    border
                    stripe
                    v-loading="loading"
                    element-loading-text="数据加载中..."
                    size="small"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        width="120"
                        prop="name"
                        label="账套名称">
                </el-table-column>
                <el-table-column
                        prop="basicSalary"
                        label="基本工资"
                        width="70">
                </el-table-column>
                <el-table-column
                        width="70"
                        prop="trafficSalary"
                        label="交通补助">
                </el-table-column>
                <el-table-column
                        width="70"
                        prop="lunchSalary"
                        label="午餐补助">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="养老金">
                    <el-table-column
                            width="70"
                            prop="pensionPer"
                            label="比率">
                    </el-table-column>
                    <el-table-column
                            width="70"
                            prop="pensionBase"
                            label="基数">
                    </el-table-column>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="医疗保险">
                    <el-table-column
                            width="70"
                            prop="medicalPer"
                            label="比率">
                    </el-table-column>
                    <el-table-column
                            width="70"
                            prop="medicalBase"
                            label="基数">
                    </el-table-column>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="公积金">
                    <el-table-column
                            width="70"
                            prop="accumulationFundPer"
                            label="比率">
                    </el-table-column>
                    <el-table-column
                            width="70"
                            prop="accumulationFundBase"
                            label="基数">
                    </el-table-column>
                </el-table-column>
                <el-table-column
                        width="100"
                        prop="allSalary"
                        label="应发工资">
                </el-table-column>
                <el-table-column
                        width="110"
                        prop="createDate"
                        label="启用时间">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        width="250"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button  size="mini" @click="showEidtSalarySob(scope.row)" type="success" >编辑</el-button>
                        <el-button  size="mini" type="danger" @click="deleteSalarySob(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: center;margin-top: 10px">
                <el-pagination
                        background
                        @prev-click="prevClick"
                        @next-click="nextClick"
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <el-dialog
                @close="addSalarySobViewClose"
                :title="diaTitle"
                :visible.sync="dialogVisible"
                width="50%">
           <div style="display: flex;justify-content: space-around;align-items: center;">
               <el-steps :active="activeIndex" direction="vertical">
                   <el-step :title="salaryParm" v-for="(salaryParm,index) in salaryParms" :key="index"></el-step>
               </el-steps>
               <el-input
                       :disabled="activeIndex==9"
                       style="width: 220px"
                       v-model="salarySob[key]"
                       :placeholder="'请输入'+salaryParms[index]+'...'"
                       v-for="(value,key,index) in salarySob"
                       :key="index"
                       v-show="activeIndex==index"></el-input>
           </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible=false" size="small" v-show="activeIndex==11">取消</el-button>
                <el-button @click="preStep" size="small" v-show="activeIndex!=0">上一步</el-button>
                <el-button type="primary" @click="nextStep" size="small">{{activeIndex==10?'确定':'下一步'}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "SalSob",
        data(){
            return{
                diaTitle:"添加工资账套",
                salarySobs:[],
                loading: false,
                total:10,
                pageNo: 1,
                pageSize: 10,
                dialogVisible:false,
                activeIndex:0,
                salaryParms:[
                    '基本工资',
                    '交通补助',
                    '午餐补助',
                    '养老金比率',
                    '养老金基金',
                    '医疗保险比率',
                    '医疗保险基金',
                    '公积金比率',
                    '公积金基金',
                    '应发工资',
                    '账套名称',
                ],
                salarySob:{
                    basicSalary:0,
                    trafficSalary:0,
                    lunchSalary:0,
                    pensionPer:0,
                    pensionBase:0,
                    medicalPer:0,
                    medicalBase:0,
                    accumulationFundPer:0,
                    accumulationFundBase:0,
                    allSalary:0,
                    name:""
                }
            }
        },
        mounted() {
            this.getSalarySobs();
        },
        computed:{
            salarySob2:function () {
                return {
                    allSalary:parseFloat(this.salarySob.basicSalary)+parseFloat(this.salarySob.trafficSalary)+parseFloat(this.salarySob.lunchSalary)-
                        parseFloat(this.salarySob.pensionBase)*parseFloat(this.salarySob.pensionPer)-parseFloat(this.salarySob.medicalBase)
                        *parseFloat(this.salarySob.medicalPer)- parseFloat(this.salarySob.accumulationFundBase)*parseFloat(this.salarySob.accumulationFundPer)
                }
            }
        },
        methods:{
            addSalarySobViewClose(){
                this.activeIndex = 0;
                this.salarySob = {
                    basicSalary:0,
                    trafficSalary:0,
                    lunchSalary:0,
                    pensionPer:0,
                    pensionBase:0,
                    medicalPer:0,
                    medicalBase:0,
                    accumulationFundPer:0,
                    accumulationFundBase:0,
                    allSalary:0,
                    name:""
                };
            },
            preStep(){
                if(this.activeIndex==0){
                    return;
                }
                this.activeIndex--;
            },
            nextStep(){
                if(this.activeIndex==8){
                    this.salarySob.allSalary = this.salarySob2.allSalary;
                }
                if(this.activeIndex == 10){
                    if(this.salarySob.id){
                        this.putRequest("/salary/sob/",this.salarySob).then(resp=>{
                            if(resp){
                                this.getSalarySobs();
                                this.dialogVisible = false;
                            }
                        })
                    }else{
                        this.postRequest("/salary/sob/",this.salarySob).then(resp=>{
                            if(resp){
                                this.getSalarySobs();
                                this.dialogVisible = false;
                            }
                        })
                    }
                    return;
                }
                this.activeIndex++;
            },
            showAddSalary(){
                this.diaTitle = "添加工资账套";
                this.dialogVisible = true;
            },
            deleteSalarySob(data){
                this.$confirm('此操作将永久删除【' + data.name + '】账套, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/salary/sob/" + data.id).then(resp => {
                        if (resp) {
                            this.getSalarySobs();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            showEidtSalarySob(data){
                this.diaTitle = "编辑工资账套";
                let newData = JSON.parse(JSON.stringify(data));
                this.salarySob.basicSalary = newData.basicSalary
                this.salarySob.trafficSalary = newData.trafficSalary;
                this.salarySob.lunchSalary = newData.basicSalary;
                this.salarySob.pensionBase = newData.pensionBase;
                this.salarySob.pensionPer = newData.pensionPer;
                this.salarySob.medicalBase = newData.medicalBase;
                this.salarySob.medicalPer = newData.medicalPer;
                this.salarySob.accumulationFundBase = newData.accumulationFundBase;
                this.salarySob.accumulationFundPer = newData.accumulationFundPer;
                this.salarySob.allSalary = newData.allSalary;
                this.salarySob.name = newData.name;
                this.salarySob.id = newData.id;
                this.dialogVisible = true;
            },
            getSalarySobs(){
                this.getRequest("/salary/sob/?pageNo="+ this.pageNo + "&pageSize=" + this.pageSize ).then(resp=>{
                    if(resp){
                        this.salarySobs = resp.data;
                        this.total = resp.total;
                    }
                })
            },
            //点击下一页时的时候触发的函数，将页码改变，然后传参去后端获取数据
            nextClick(currentPage) {
                this.pageNo = currentPage;
                this.getSalarySob();
            },
            //点击上一页时的时候触发的函数，将页码改变，然后传参去后端获取数据
            prevClick(currentPage) {
                this.pageNo = currentPage;
                this.getSalarySob();
            },
            //点击页码的时候触发的函数，将页码改变，然后传参去后端获取数据
            currentChange(currentPage) {
                this.pageNo = currentPage;
                this.getSalarySob();
            },
            //点击页数的时候触发的函数，将页数改变，然后传参去后端获取数据
            sizeChange(pageSize) {
                this.pageSize = pageSize;
                this.getSalarySob();
            }
        }
    }
</script>

<style>
    body .el-table th.gutter {
        display: table-cell !important
    }
</style>
